<template>
    <div class="page">
        <!-- separator-class="el-icon-arrow-right" -->
        <el-breadcrumb>
            <transition-group name="breadcrumb">
                <!-- <el-breadcrumb-item :to="{ path: '/' }">概况总览</el-breadcrumb-item> -->
                <el-breadcrumb-item v-for="item in levelList" :key="item.name" :to="getTo(item)">{{item.meta.title}}</el-breadcrumb-item>
            </transition-group>
        </el-breadcrumb>
    </div>
</template>

<script>
export default {
    data () {
        return {
            levelList: null,
        };
    },
    watch: {
        $route (route) {
            // if (route.path.startsWith("/redirect/")) {
            //     return;
            // }
            this.getBreadcrumb();
        },
    },
    created () {
        this.getBreadcrumb();
    },
    methods: {
        getBreadcrumb () {
            this.levelList = this.$route.matched.filter(
                (item) => item.meta && item.meta.title
            );
        },
        getTo (item) {
            if (item.meta && item.meta.breadcrumbClick === false) {
                return ''
            }
            return { name: item.name }
        }
    },
};
</script>

<style lang="scss" scoped>
.page {
    ::v-deep .el-breadcrumb {
        display: flex;
        align-items: center;
        padding: 20px;
        font-size: 16px;
        color: var(--color-text-1);
    }
    ::v-deep .is-link,
    ::v-deep .el-breadcrumb__inner {
        color: var(--color-text-1) !important;
    }
}
</style>